<template>
	<view class="introduct-wrap" style="background: #fff;">
		<view class="home-headers search-pos">
			<view class="home-search">
				<view class="iconfont iconsousuohome"></view>
				<input class="search-input" v-model="searchKey" @confirm="getProductList({size:10,num:1})"></input>
				<view class="search-clear iconfont iconguanbi1" v-if="searchKey" @tap="searchKeyFun"></view>
			</view>
		</view>
		<view class="main-component">
			<view v-for="(item,index) in dragList" :key="index">
				<base-component ref="baseComponent" :record="item" :isSearch="isSearch"></base-component>
			</view>
		</view>
		<uni-row class="demo-uni-row" v-for="(item, index) in fileList" :class="{ 'ashSetting': index != 0 }" :gutter="8" style="margin-top: 1rem; padding: 0 0.4rem ;">
			<view @click="toInfo">
				<uni-col :span="5" style="padding-top: 20.83333%; position: relative;">
					<image style="position: absolute; top: 0; left:0; width: 100%; height: 100%;" :src="item.url" mode="aspectFill"></image>
				</uni-col>
				<uni-col :span="19">
					<uni-col :span="20">
						<uni-tag text="皇冠店铺" size="small" type="error" style="margin-right: 0.2rem;"></uni-tag>
						<text class="clamp" style="line-height: initial;">新生活化妆品和平店</text>
					</uni-col>
					<uni-col :span="4" style="padding-left: 0; text-align: right;">
						<text style="font-size:.8rem; line-height: 48rpx; color: #5a5959;">1.4公里</text>
					</uni-col>
					<uni-col :span="10">
						<text style="font-size:.8rem;color: #5a5959;">服务次数4223</text>
					</uni-col>
					<uni-col :span="14" style="text-align: right;">
						<text style="font-size:.8rem; line-height: 48rpx; color: #5a5959;">营业时间：9:00-18:00</text>
					</uni-col>
					<uni-col :span="24">
						<text class="iconfont iconlingdang dist-text">服务简称</text>
						<text class="iconfont iconlingdang dist-text">服务简称</text>
						<text class="iconfont iconlingdang dist-text">服务简称</text>
						<text class="iconfont iconlingdang dist-text">服务简称</text>
						<!-- <uni-tag text="服务简称" size="small" inverted="true" circle="true" type="error" style="margin-right: 0.2rem; margin-bottom: 0.3rem;"></uni-tag>
						<uni-tag text="皇冠店" size="small" inverted="true" circle="true" type="error" style="margin-right: 0.2rem; margin-bottom: 0.3rem;"></uni-tag>
						<uni-tag text="皇冠" size="small" inverted="true" circle="true" type="error" style="margin-right: 0.2rem; margin-bottom: 0.3rem;"></uni-tag>
						<uni-tag text="服务标签" size="small" inverted="true" circle="true" type="error" style="margin-right: 0.2rem; margin-bottom: 0.3rem;"></uni-tag> -->
					</uni-col>
					<uni-col :span="24" style="margin: 0.3rem 0 0 0;" v-for="(itemT, index) in item.list" :class="{ 'ashSetting': index != 0 }" v-show="item.flag || index<2">
						<uni-col :span="4" style="padding-top: 16.66667%; position: relative;">
							<view>
								<image style="position: absolute; top: 0; left:0; width: 100%; height: 100%;" :src="itemT.url" mode="aspectFill"></image>
							</view>
						</uni-col>
						<uni-col :span="20">
							<uni-col :span="12">
								<text style="margin: 0.3rem; 0 0 0.3rem">王勇</text>
								<uni-rate :value="3" :size="16" color="#bbb" active-color="#fd911e" max="3" style="display:inline-block;" />
							</uni-col>
							<uni-col :span="12" style="text-align: right;">
								<text style="font-size:.8rem; color: #5a5959; margin: 0.5rem 0 0 0.3rem">服务次数4223</text>
							</uni-col>
							<uni-col>
								<text class="iconfont iconlingdang dist-text">服务简称 ￥109</text>
								<text class="iconfont iconlingdang dist-text">服务简称 ￥109</text>
								<!-- <span class="iconfont iconlingdang dist-text">服务简称 ￥109</span> -->
								<!-- <uni-tag text="皇冠店铺" size="small" inverted="true" circle="true" style="margin-right: 0.2rem; margin-bottom: 0.3rem;"></uni-tag>
								<uni-tag text="皇冠" size="small" inverted="true" circle="true" style="margin-right: 0.2rem; margin-bottom: 0.3rem;"></uni-tag>
								<uni-tag text="皇冠" size="small" inverted="true" circle="true" style="margin-right: 0.2rem; margin-bottom: 0.3rem;"></uni-tag>
								<uni-tag text="服务" size="small" inverted="true" circle="true" style="margin-right: 0.2rem; margin-bottom: 0.3rem;"></uni-tag> -->
							</uni-col>
						</uni-col>
					</uni-col>
					<uni-col style="margin-top: 16rpx;" v-for="item in 3" v-show="false">
						<uni-col :span="4" style="padding-top: 16.66667%; position: relative;">
							<image style="position: absolute; top: 0; left:0; width: 100%; height: 100%;" src="https://d1icd6shlvmxi6.cloudfront.net/gsc/IQW1FZ/5c/98/45/5c9845c97f9f492c8133479374a8eeb5/images/105-美丽管家详情/u263.svg?token=ed603ccca838ebc81b3804273278b17c5c24faeb4db0fa41498df28aba7950f7" mode="aspectFill"></image>
						</uni-col>
						<uni-col :span="15">
							<uni-col style="margin: 5rpx 0;">
								<text style="font-size:.8rem; color: #5a5959;" class="clamp">雪非雪青果维雪青果维雪青果维雪青果维雪青果维雪青果维蔬嫩肤护理服务</text>
							</uni-col>
							<uni-col style="margin: 5rpx 0;">
								<text style="font-size:.8rem; color: #5a5959;">护理时长：50分钟</text>
							</uni-col>
						</uni-col>
						<uni-col :span="5">
							<text style="font-size:1.2rem; color: #E37078; line-height: 96rpx;">￥107</text>
						</uni-col>
					</uni-col>
				</uni-col>
			</view>
			<uni-col :span="24" style="text-align: center; margin-top: 0.3rem ;" v-if="!item.flag">
				<text @click="openAll(index)">展开更多</text>
				<uni-icons type="arrowdown" size="15"></uni-icons>
			</uni-col>
			<uni-col :span="24" style="text-align: center; margin-top: 0.3rem;" v-if="item.flag">
				<text @click="openAll(index)">收起</text>
				<uni-icons type="arrowup" size="15"></uni-icons>
			</uni-col>
		</uni-row>
		<foot-bar :current="selectedIndex"></foot-bar>
	</view>
</template>

<script>
	import footBar from "../footbar/footbar.vue"
	import baseComponent from '@/components/baseComponent/baseComponent'
	export default {
		components: {
			footBar,
			baseComponent
		},
		data() {
			return {
				fileList: [
					{ 
						url: 'https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoTdLxbkE2dha2DlZ1Gs4BekUOydHibicdk5CQMzhL97qksyib1aDwqIgcoFqXmH1k7W23cSSSht9vIQ/132',
						list: [
							{ url: 'https://thirdwx.qlogo.cn/mmopen/vi_32/M5bIsGJ28psXKrqER4n3CAJUj8mrzibQsqRbibSe1GPcW6b4nuNpBycT0ibMS1I9Q24kAnCL55KOD7VuIvA119ujw/132' },
							{ url: 'https://thirdwx.qlogo.cn/mmopen/vi_32/M5bIsGJ28psXKrqER4n3CAJUj8mrzibQsqRbibSe1GPcW6b4nuNpBycT0ibMS1I9Q24kAnCL55KOD7VuIvA119ujw/132' },
							{ url: 'https://thirdwx.qlogo.cn/mmopen/vi_32/M5bIsGJ28psXKrqER4n3CAJUj8mrzibQsqRbibSe1GPcW6b4nuNpBycT0ibMS1I9Q24kAnCL55KOD7VuIvA119ujw/132' },
							{ url: 'https://thirdwx.qlogo.cn/mmopen/vi_32/M5bIsGJ28psXKrqER4n3CAJUj8mrzibQsqRbibSe1GPcW6b4nuNpBycT0ibMS1I9Q24kAnCL55KOD7VuIvA119ujw/132' }
						],
						flag: false
					},
					{
						url: 'https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoTdLxbkE2dha2DlZ1Gs4BekUOydHibicdk5CQMzhL97qksyib1aDwqIgcoFqXmH1k7W23cSSSht9vIQ/132',
						list: [
							{ url: 'https://thirdwx.qlogo.cn/mmopen/vi_32/M5bIsGJ28psXKrqER4n3CAJUj8mrzibQsqRbibSe1GPcW6b4nuNpBycT0ibMS1I9Q24kAnCL55KOD7VuIvA119ujw/132' },
							{ url: 'https://thirdwx.qlogo.cn/mmopen/vi_32/M5bIsGJ28psXKrqER4n3CAJUj8mrzibQsqRbibSe1GPcW6b4nuNpBycT0ibMS1I9Q24kAnCL55KOD7VuIvA119ujw/132' },
							{ url: 'https://thirdwx.qlogo.cn/mmopen/vi_32/M5bIsGJ28psXKrqER4n3CAJUj8mrzibQsqRbibSe1GPcW6b4nuNpBycT0ibMS1I9Q24kAnCL55KOD7VuIvA119ujw/132' },
							{ url: 'https://thirdwx.qlogo.cn/mmopen/vi_32/M5bIsGJ28psXKrqER4n3CAJUj8mrzibQsqRbibSe1GPcW6b4nuNpBycT0ibMS1I9Q24kAnCL55KOD7VuIvA119ujw/132' }
						],
						flag: false
					},
					{
						url: 'https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoTdLxbkE2dha2DlZ1Gs4BekUOydHibicdk5CQMzhL97qksyib1aDwqIgcoFqXmH1k7W23cSSSht9vIQ/132',
						list: [
							{ url: 'https://thirdwx.qlogo.cn/mmopen/vi_32/M5bIsGJ28psXKrqER4n3CAJUj8mrzibQsqRbibSe1GPcW6b4nuNpBycT0ibMS1I9Q24kAnCL55KOD7VuIvA119ujw/132' },
							{ url: 'https://thirdwx.qlogo.cn/mmopen/vi_32/M5bIsGJ28psXKrqER4n3CAJUj8mrzibQsqRbibSe1GPcW6b4nuNpBycT0ibMS1I9Q24kAnCL55KOD7VuIvA119ujw/132' },
							{ url: 'https://thirdwx.qlogo.cn/mmopen/vi_32/M5bIsGJ28psXKrqER4n3CAJUj8mrzibQsqRbibSe1GPcW6b4nuNpBycT0ibMS1I9Q24kAnCL55KOD7VuIvA119ujw/132' },
							{ url: 'https://thirdwx.qlogo.cn/mmopen/vi_32/M5bIsGJ28psXKrqER4n3CAJUj8mrzibQsqRbibSe1GPcW6b4nuNpBycT0ibMS1I9Q24kAnCL55KOD7VuIvA119ujw/132' }
						],
						flag: false
					},
					{
						url: 'https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoTdLxbkE2dha2DlZ1Gs4BekUOydHibicdk5CQMzhL97qksyib1aDwqIgcoFqXmH1k7W23cSSSht9vIQ/132',
						list: [
							{ url: 'https://thirdwx.qlogo.cn/mmopen/vi_32/M5bIsGJ28psXKrqER4n3CAJUj8mrzibQsqRbibSe1GPcW6b4nuNpBycT0ibMS1I9Q24kAnCL55KOD7VuIvA119ujw/132' },
							{ url: 'https://thirdwx.qlogo.cn/mmopen/vi_32/M5bIsGJ28psXKrqER4n3CAJUj8mrzibQsqRbibSe1GPcW6b4nuNpBycT0ibMS1I9Q24kAnCL55KOD7VuIvA119ujw/132' },
							{ url: 'https://thirdwx.qlogo.cn/mmopen/vi_32/M5bIsGJ28psXKrqER4n3CAJUj8mrzibQsqRbibSe1GPcW6b4nuNpBycT0ibMS1I9Q24kAnCL55KOD7VuIvA119ujw/132' },
							{ url: 'https://thirdwx.qlogo.cn/mmopen/vi_32/M5bIsGJ28psXKrqER4n3CAJUj8mrzibQsqRbibSe1GPcW6b4nuNpBycT0ibMS1I9Q24kAnCL55KOD7VuIvA119ujw/132' }
						],
						flag: false
					}
				],
				searchKey: '',
				autoplay: true,
				isShow: {},
				selectedIndex: 0,
				addrss: '',
				isSearch: true,
				dragList: [
					{
					  "refreshFlg": 1619357800537,
					  "options": {
					    "displayMultipleItems": 1,
					    "timeInterval": 2,
					    "fileList": [
					      {
					        "uid": 1626054497421,
					        "id": "30564950ae92de0418b5c0300258fc4f",
					        "type": "0",
					        "url": "https://dr-mall-cdn.newlifegroup.com.cn/newdrmall/dr/20210712/c38e8c86-f815-4048-a925-1e901d46acbb/%E9%A6%96%E9%A1%B5%E6%B4%BB%E5%8A%A8banner.jpg",
					        "linkName": "商品分组   -   家居清洁",
					        "status": "success"
					      },
					      {
					        "uid": 1626241209011,
					        "id": "P2107140000000159",
					        "type": "1",
					        "url": "https://dr-mall-cdn.newlifegroup.com.cn/newdrmall/dr/20210714/e9356d9e-36eb-4c8b-99c5-f1075ded5dd7/%E9%A6%96%E9%A1%B5%E6%96%B0%E5%93%81%E4%B8%8A%E5%B8%82.jpg",
					        "linkName": "商品详情   -   Dr.R清香洁厕液",
					        "status": "success"
					      },
					      {
					        "uid": 1623382545874,
					        "id": "P2106110000000158",
					        "type": "1",
					        "url": "https://dr-mall-cdn.newlifegroup.com.cn/newdrmall/dr/20210611/756855d9-1b8b-4407-8f8f-3d420f94b48d/%E9%A6%96%E9%A1%B5banner.jpg",
					        "linkName": "商品详情   -   vita nuova仙草冻（果味型果冻）",
					        "status": "success"
					      },
					      {
					        "uid": 1618988262071,
					        "id": "a6c0beeae4b1e434a09efc0ad65b1db3",
					        "type": "4",
					        "url": "https://dr-mall-cdn.newlifegroup.com.cn/newdrmall/dr/20210421/992c2a7f-2bd9-4184-8d62-c609131c255b/3.png",
					        "linkName": "活动页面   -   全产品页面",
					        "status": "success"
					      },
					      {
					        "uid": 1618988266436,
					        "id": "369b93e008e76cf94bb56a29930332d9",
					        "type": "4",
					        "url": "https://dr-mall-cdn.newlifegroup.com.cn/newdrmall/dr/20210421/8b379492-ba22-4800-ae39-8525d3b6423f/4.png",
					        "linkName": "活动页面   -   品牌故事",
					        "status": "success"
					      }
					    ],
					    "height": 409
					  },
					  "label": "轮播广告",
					  "type": "carousel",
					  "key": "carousel_1617850725444"
					}
				]
			}
		},
		onLoad() {
			this.getList()
		},
		mounted() {
			const curVue = this;
			console.log(uni)
			// uni.getLocation({
			//     type: 'wgs84',
			// 	geocode: true,
			//     success: function (res) {
			// 		this.addrss = res
			// 		console.log(this.addrss)
			// 		const data = {
			// 			latitude: this.addrss.latitude,
			// 			longitude: this.addrss.longitude
			// 		}
			// 		curVue.$http.getMacList(data).then((res) => {
			// 			if (res.status === 0) {
			// 				console.log(res, '123456')
			// 			}
			// 		}).catch(() => {
			// 		});
			//     }
			// });
			
		},
		methods: {
			getList() {
				const curVue = this;
				uni.getLocation({
				    type: 'wgs84',
				    success: function (res) {
						console.log('当前位置的经度：' + res);
				        console.log('当前位置的经度：' + res.longitude);
				        console.log('当前位置的纬度：' + res.latitude);
						const params = {
							jd: res.longitude,
							wd: res.latitude,
							page: 0,
							limit: 10
						}
						console.log(params, '/////////////////')
						curVue.$http.getShopList(params).then((res) => {
							console.log(res)
							if (res.status === 0) {
								// uni.showToast({
								// 	title: '保存成功',
								// 	icon: 'none',
								// })
							}
						})
				    }
				});
				
			},
			toInfo() {
				console.log(123456)
				uni.navigateTo({
					url:'/packageG/pages/distributor/distributorInfo'
				})
			},
			//商品列表
			getProductList(page) {
				console.log(page)
			},
			
			searchKeyFun(){
				this.searchKey = '';
			},
			toChange() {
				
			},
			openAll(index) {
				this.fileList[index].flag = !this.fileList[index].flag;
				console.log(this.fileList)
			}
		}
	}
</script>

<style lang="scss">
	.introduct-wrap{
		// padding: 30rpx;
		padding-bottom: 120rpx;
		padding-top: 100rpx;
	}
	.demo-uni-row image{
		width: 100%;
	}
	.search-input {
		width: 100%;
	}
	.ashSetting {
		-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
		filter: grayscale(100%);
	}
	.dist-text{
		font-size: 24rpx;
		color: #F4B406;
		margin-right: 16rpx;
	}
</style>
